<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../style/12.css">
</head>
<body>
  <ul class="container">
    <li>
      <img src="../images/1.jpg" alt="">
      <p>
        凡是现实（存在）的就是合理的，凡是合理（存在）的就是现实的。——黑格尔
      </p>
    </li>
    <li>
      <img src="../images/2.jpg" alt="">
      <p>作为瞬间，它当然是短暂的……然而，它却是决定性的，是充满永恒的。——克尔凯郭尔
      </p>
    </li><li>
      <img src="../images/3.jpg" alt="">
      <p>人是生而自由的，但却无往而不在枷锁之中。自以为是其他一切的主人，反而比其他一切更是奴隶。——卢梭
      </p>
    </li><li>
      <img src="../images/4.jpg" alt="">
      <p>如果我们过于爽快地承认失败，就可能使自己发觉不了我们非常接近于正确。——卡尔·波普尔
      </p>
    </li><li>
      <img src="../images/5.jpg" alt="">
      <p>在这个世界上，平等地待人和试图使他们平等这两者之间的差别总是存在。前者是一个自由社会的前提条件，而后者则象D?托克维尔描述的那样，意味着“一种新的奴役方式”。——哈耶克
      </p>
    </li>
    <li>
      <img src="../images/6.jpg" alt="">
      <p>我不能给自己或是别人提供那种日常生活中的普通的快乐。这种快乐对我来说毫无意义，我也不能围绕它来安排自己的生活。——福柯
      </p>
    </li>
    <li>
      <img src="../images/7.jpg" alt="">
      <p>那隐藏着的宇宙本质自身并没有力量足以抗拒求知的勇气。对于勇毅的求知者，它只能揭开它的秘密，将它的财富和奥妙公开给他，让他享受。——黑格尔
      </p>
    </li>
    <li>
      <img src="../images/8.jpg" alt="">
      <p>科学性的语言游戏希望使其说法成为真理，但却没有能力凭自己的力量，将其提出的道理合法化。——利奥塔
      </p>
    </li>
  </ul>
  <script>
    const lis=document.querySelectorAll('.container li'),
          ps=document.querySelectorAll('.container li p');
    // 获取移入移出的方向
    function direct(e,o){
      var w=o.offsetWidth,
          h=o.offsetHeight,
          top=o.offsetTop,
          left=o.offsetLeft,
          scrollTop=document.body.scrollTop||document.documentElement.scrollTop,
          scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft,
          offTop=top-scrollTop,
          offLeft=left-scrollLeft,
          ex=(e.pageX-scrollLeft)||e.clientX,
          ey=(e.pageY-scrollTop)||e.clientY,
          x=(ex-offLeft-w/2)*(w>h?(h/w):1),
          y=(ey-offTop-h/2)*(h>w?(w/h):1),
          angle=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4,
          directName=['上','右','下','左'];
    return directName[angle]

    }
    // 鼠标事件（方向，元素，鼠标进入或离开）
    function mouseEvent(angle,o,d){
      var w=o.offsetWidth,
          h=o.offsetHeight;
      var p=o.querySelector('p')    //元素下的p元素
      p.style.transition='0s'     //默认无过渡效果
      if(d=='in'){
        switch(angle){
          case '上':
            if(p.offsetLeft==0&&p.offsetTop==0) break;
            p.style.left=0
            p.style.top=-h+'px'
            setTimeout(()=>{
              p.style.left=0
              p.style.top=0
              p.style.transition='0.2s'
            },50)
            break
          case '右':
            if(p.offsetLeft==0&&p.offsetTop==0) break;
            p.style.left=w+'px'
            p.style.top=0
            setTimeout(()=>{
              p.style.left=0
              p.style.top=0
              p.style.transition='0.2s'
            },50)
            break;
          case '下':
            if(p.offsetLeft==0&&p.offsetTop==0) break;
            p.style.left=0
            p.style.top=h+'px'
            setTimeout(()=>{
              p.style.left=0
              p.style.top=0
              p.style.transition='0.2s'
            },50)
            break;
          case '左':
            if(p.offsetLeft==0&&p.offsetTop==0) break;
            p.style.left=-w+'px'
            p.style.top=0
            setTimeout(()=>{
              p.style.left=0
              p.style.top=0
              p.style.transition='0.2s'
            },50)
            break;
        }
      }else if(d=='out'){
        switch(angle){
          case '上':
            setTimeout(()=>{
              p.style.left=0
              p.style.top=-h+'px'
              p.style.transition='0.2s'
              p.style.transitionDelay='0.1s'
            },50)
            break;
          case '右':
            setTimeout(()=>{
              p.style.left=w+'px'
              p.style.top=0
              p.style.transition='0.2s'
              p.style.transitionDelay='0.1s'
            },50)
            break;
          case '下':
            setTimeout(()=>{
              p.style.left=0
              p.style.top=h+'px'
              p.style.transition='0.2s'
              p.style.transitionDelay='0.1s'
            },50)
            break;
          case '左':
            setTimeout(()=>{
              p.style.left=-w+'px'
              p.style.top=0
              p.style.transition='0.2s'
              p.style.transitionDelay='0.1s'
            },50)
            break;
        }
      }
    }
    lis.forEach(li=>{
      li.addEventListener('mouseenter',function(e){
        var e=e||window.event
        var angle=direct(e,this)
        mouseEvent(angle,this,'in')
      })
      li.addEventListener('mouseleave',function(e){
        var e=e||window.event
        var angle=direct(e,this)
        mouseEvent(angle,this,'out')
      })
    })
  </script>
</body>
</html>